import { Segmented } from "antd";
import { useState } from "react";
import { useComponetsStore } from "../../store/components";
import { ComponentAttr } from "./ComponentAttr";
import { ComponentEvent } from "./ComponentEvent";
import { ComponentStyle } from "./ComponentStyle";

export default function Setting() {
    // const { components } = useComponetsStore();
	// <pre>{JSON.stringify(components, null, 2)}</pre>;

    const { curComponentId } = useComponetsStore();

    const [key, setKey] = useState<string>('属性');

    if (!curComponentId) return null;
  
    return <div >
        <Segmented value={key} onChange={setKey} block options={['属性', '样式', '事件']} />
        <div>
            {
                key === '属性' && <ComponentAttr />
            }
            {
                key === '样式' && <ComponentStyle />
            }
            {
                key === '事件' && <ComponentEvent />
            }
        </div>
    </div>
}
